/**
 * Created by tanbingqin on 2018/11/7.
 */
import React from 'react';
import { connect } from 'react-redux';
import {messages, deepCopy, deepFullCopy, queryCurrencyPrecision} from 'share/common'
import {Input, Row, Col, Table, Popover, Affix, Button, InputNumber, Tag} from 'antd';
import noInfo from 'images/no-info.png'
import 'styles/request/new-request/expense-type-detail.scss'

class ExpenseDetailContent extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      nowExpense: {},
      expenseApportionColumns: [
        {title: messages('request.key516')/*分摊项*/, dataIndex: 'costCenterItems', render: (value, record, tableIndex) => {
          return (
            <div>
              {record.budgetLabelCode === 'BUD_002' && <Tag color="red">{messages('request.key297')/*超预算*/}</Tag>}
              {record.budgetLabelCode === 'BUD_003' && <Tag color="blue">{messages('request.key550')/*预算预警*/}</Tag>}
              {
                value.map((oneApportion, index) => {
                  return oneApportion.isApportionItem ? (
                    <div key={index}>
                      <Row type="flex" align="middle" style={{marginBottom: 5}}>
                        <Col span={4} className="expense-apportion-name"><Popover content={oneApportion.fieldName}>{oneApportion.fieldName}:</Popover></Col>
                        <Col span={20} className="expense-apportion-content">
                          <Popover placement="topLeft" content={<div style={{maxWidth: 500}}>{oneApportion.name}</div>}>{oneApportion.name}</Popover>
                        </Col>
                      </Row>
                    </div>
                  ) : (<div />)
                })
              }
            </div>
          );
        }},
        {title: messages('request.key517')/*分摊金额*/, dataIndex: 'amount', width: '15%', render: (value, record, tableIndex) => {
          return (
            <InputNumber size="small"
                         min={0}
                         step={1}
                         precision={queryCurrencyPrecision(this.state.nowExpense.currencyCode)}
                         disabled={true}
                         value={value}
                         style={{width:'100%'}}/>
          )
        }},
        {title: messages('request.key518')/*分摊比例%*/, dataIndex: 'scale', width: '15%', render: (value, record, tableIndex) => {
          return (
            <InputNumber size="small"
                         min={0}
                         step={1}
                         disabled={true}
                         value={value}
                         style={{width:'100%'}}/>
          )
        }}
      ]
    }
  }

  componentWillMount() {};

  componentWillReceiveProps(nextProps) {
    this.setState({nowExpense: nextProps.nowExpense});
  };

  renderItineraryStr = () => {
    const { nowExpense } = this.state;
    let itineraryStr = '';
    let summary = nowExpense.itinerarySummary ? JSON.parse(nowExpense.itinerarySummary) : null;
    if (nowExpense.itineraryType === 1001 || nowExpense.itineraryType === 1002) {
      itineraryStr = nowExpense.itineraryType === 1001 ? messages('request.key560')/*飞机*/ : messages('request.key410')/*火车*/;
      let fromCityStr = summary.fromCity ? summary.fromCity : messages('request.key490')/*不限*/;
      let toCityStr = summary.toCity ? summary.toCity : messages('request.key490')/*不限*/;
      itineraryStr = summary ? `${itineraryStr} | ${summary.startDate} | ${fromCityStr} - ${toCityStr}` : '-';
    }
    if (nowExpense.itineraryType === 1003) {
      itineraryStr = messages('request.key414')/*酒店*/;
      let cityStr = summary.city ? summary.city : messages('request.key490')/*不限*/;
      itineraryStr = summary ? `${itineraryStr} | ${summary.startDate} | ${cityStr}` : '-';
    }
    if (nowExpense.itineraryType === 1006) {
      let cityStr = summary.toCity ? summary.toCity : messages('request.key555')/*通用城市*/;
      itineraryStr = messages('request.key413')/*差补*/;
      itineraryStr = summary ? `${itineraryStr} | ${summary.startDate} ~ ${summary.endDate} | ${cityStr}` : '-';
    }
    return itineraryStr || '--';
  };

  render() {
    const { nowExpense, expenseApportionColumns } = this.state;
    const { info, isHidePaymentType } = this.props;
    return (
      <div className="expense-type-detail">
        {nowExpense && (
          <div className="expense-type-container" style={{padding: '20px 40px'}}>
            <Row type="flex" align="middle" style={{marginBottom: 15}}>
              <Col span={11} style={{textAlign: 'right'}}>
                <img src={(nowExpense.expenseType && nowExpense.expenseType.iconURL) ? nowExpense.expenseType.iconURL : noInfo} style={{maxHeight: 100, maxWidth: 100}}/>
              </Col>
              <Col offset={2} span={11}>
                <div className="expense-description-font">{nowExpense.name}</div>
                <div className="expense-description-font">
                  {nowExpense.currencyCode}&nbsp;{this.filterMoney(nowExpense.amount, queryCurrencyPrecision(nowExpense.currencyCode))}
                </div>
              </Col>
            </Row>
            <Row style={{marginBottom: 15, lineHeight: '31px'}}>
              <Col span={5} style={{textAlign: 'right'}}>{messages('request.key640')/*本币汇率*/}：</Col>
              <Col span={11} offset={1}>{this.filterMoney(nowExpense.actualCurrencyRate || 1, 2)}</Col>
            </Row>
            <Row style={{marginBottom: 15, lineHeight: '31px'}}>
              <Col span={5} style={{textAlign: 'right'}}>{messages('components.key148'/*本币金额*/)}：</Col>
              <Col span={11} offset={1}>{this.filterMoney((nowExpense.amount * nowExpense.actualCurrencyRate).toFixed(2), queryCurrencyPrecision(info.currencyCode))}</Col>
            </Row>
            {nowExpense.itineraryOID && (
              <Row style={{marginBottom: 15, lineHeight: '31px'}}>
                <Col span={5} style={{textAlign: 'right'}}>{messages('request.key559')/*行程*/}：</Col>
                <Col span={11} offset={1}>{this.renderItineraryStr()}</Col>
              </Row>
            )}
            {!isHidePaymentType && (
              <Row style={{marginBottom: 15, lineHeight: '31px'}}>
                <Col span={5} style={{textAlign: 'right'}}>{messages('components.key383'/*支付方式*/)}：</Col>
                <Col span={11} offset={1}>{Number(nowExpense.paymentType) === 1001 ? messages('components.key384'/*个人支付*/) : messages('components.key385'/*公司支付*/)}</Col>
              </Row>
            )}
            {nowExpense.dataReimbursementList && nowExpense.dataReimbursementList.map(item => {
              return (
                <Row style={{marginBottom: 15, lineHeight: '31px'}}>
                  <Col span={5} style={{textAlign: 'right'}}>{item.name}：</Col>
                  <Col span={11} offset={1}>{item.showValue || '--'}</Col>
                </Row>
              )
            })}
            <Row style={{marginBottom: 15, lineHeight: '31px'}}>
              <Col span={5} style={{textAlign: 'right'}}>{messages('common.remark')/*备注*/}：</Col>
              <Col span={11} offset={1}>{nowExpense.remark || '--'}</Col>
            </Row>
            {nowExpense && nowExpense.apportionmentDTOList && nowExpense.apportionmentDTOList.length && (
              <Table rowKey={(record, index) => index}
                     columns={expenseApportionColumns}
                     dataSource={nowExpense.apportionmentDTOList}
                     pagination={false}
                     style={{width:'100%'}}
                     bordered
                     size="small"/>
            )}
          </div>
        )}
        <Affix style={{position: 'absolute', backgroundColor: 'white', bottom: 0, width: '100%', marginLeft: -15, padding: 9,
          boxShadow: '0px 0px 7px #ccc', textAlign: 'center'}} offsetBottom={0}>
          <Button type="primary" onClick={this.props.close}>{messages('common.back')/*返回*/}</Button>
        </Affix>
      </div>
    )
  }
}

function mapStateToProps(state) {
  return {
    language: state.main.language
  }
}

export default connect(mapStateToProps)(ExpenseDetailContent)
